<template>
    <div id="container"></div>
</template>

<script setup lang="ts">
// import { RequestStoreList } from '@/api'
import { onMounted,ref } from 'vue'
import iconMap from '@/assets/image/map_icon.jpeg'

onMounted(() => {
    getShopStore()
})

/**
 * 获取商家信息
 */
const getShopStore = async () => {
    // const data = await RequestStoreList()
    // const { resultCode, resultInfo } = data
    // if (resultCode === 1) {
        // initMap(resultInfo.list)
    // }
    initMap(mapList.value)
}

const initMap = shopList => {
    // 创建地图对象展示地图
    // eslint-disable-next-line no-undef
    var map = new BMapGL.Map('container')
    // eslint-disable-next-line no-undef
    var point = new BMapGL.Point(104.0477, 30.636651)
    map.centerAndZoom(point, 15)
    map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放

    // 定位
    locationMap(map)

    // 绘制商家列表
    drawShopMp(shopList, map)
}

/**
 * 定位
 */
const locationMap = map => {
    const BMAP_STATUS_SUCCESS = 0 // 定位成功
    // eslint-disable-next-line no-undef
    var geolocation = new BMapGL.Geolocation()
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() === BMAP_STATUS_SUCCESS) {
            // eslint-disable-next-line no-undef
            var myIcon = new BMapGL.Icon('../images/map_icon1.png', new BMapGL.Size(20, 28))
            // 创建标注对象并添加到地图
            // eslint-disable-next-line no-undef
            var mk = new BMapGL.Marker(r.point, { icon: myIcon })
            // var mk = new BMapGL.Marker(r.point) // 创建marker标注
            map.addOverlay(mk) // 添加标注到地图
            map.panTo(r.point) // 移动地图中心到标注位置
            // alert('您的位置：' + r.point.lng + ',' + r.point.lat)
        } else {
            alert('failed' + this.getStatus())
        }
    })
}

/**
 * 绘制商家列表
 */
const drawShopMp = (shopList, map) => {
    // 展示商家
    shopList.forEach(shop => {
        const gpsPoints = shop.location.split(',')
        // eslint-disable-next-line no-undef
        var point = new BMapGL.Point(gpsPoints[0], gpsPoints[1])
        // eslint-disable-next-line no-undef
        var mk = new BMapGL.Marker(point) // 创建marker标注
        map.addOverlay(mk) // 添加标注到地图

        var opts = {
            width: 250, // 信息窗口宽度
            height: 100, // 信息窗口高度
            title: shop.sname, // 信息窗口标题
        }
        const content = `<div class="g-info">
                     <img id="${shop.s_id}" src="${shop.url}" alt="${shop.s_id}">
                    <p>${shop.description}</p>
                </div>`
        // eslint-disable-next-line no-undef
        const infoWindow = new BMapGL.InfoWindow(content, opts) // 创建信息窗口对象
        mk.addEventListener('click', function () {
            this.openInfoWindow(infoWindow)
        })
    })
}

const mapList = ref([
      {
        "s_id": 5,
        "sname": "陈记状元店",
        "location": "104.050503,30.65287",
        "url": "https://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000618488071_1_800x800.jpg",
        "description": "七星椒菜馆 生长在浙江余姚山清水秀的长冷江畔，为国家认定的无公害产品。本店所用的冷江鳖为余姚市冷江鳖业有限公司直供产品，套养捕食鲜活鱼虾，足够凶猛。该公司是本店长期战略合作伙伴，潍坊独家冷江鳖餐饮，冷江鳖配以野生灵芝是冬季滋补养生的尚品，假一罚万。"
      },
      {
        "s_id": 4,
        "sname": "老妈烫饭(新街口店)",
        "location": "104.059091,30.654796",
        "url": "https://fuss10.elemecdn.com/e/82/c98fec55c30021b85ab608718b66ajpeg.jpeg?imageMogr/format/webp/thumbnail/240x/",
        "description": "又名特色冷江鳖，冷江鳖生长在浙江余姚山清水秀的长冷江畔，为国家认定的无公害产品。本店所用的冷江鳖为余姚市冷江鳖业有限公司直供产品，套养捕食鲜活鱼虾，足够凶猛。该公司是本店长期战略合作伙伴，潍坊独家冷江鳖餐饮，冷江鳖配以野生灵芝是冬季滋补养生的尚品，假一罚万。"
      },
      {
        "s_id": 3,
        "sname": "陈记状元拌面（集庆门大街店）",
        "location": "104.070661,30.649328",
        "url": "https://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000665411505_1_800x800.jpg",
        "description": "陈记状元拌面（集庆门大街店）冷江鳖生长在浙江余姚山清水秀的长冷江畔，为国家认定的无公害产品。本店所用的冷江鳖为余姚市冷江鳖业有限公司直供产品，套养捕食鲜活鱼虾，足够凶猛。该公司是本店长期战略合作伙伴，潍坊独家冷江鳖餐饮，冷江鳖配以野生灵芝是冬季滋补养生的尚品，假一罚万。"
      },
      {
        "s_id": 2,
        "sname": "必胜客宅急送（南京南湖店）",
        "location": "104.072314,30.663494",
        "url": "https://fuss10.elemecdn.com/a/05/a080fb38089da473d9c1738047a69jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
        "description": "文蛤的营养非常高，用辣椒清炒微辣鲜美，是佐酒的绝佳好菜。 再宴客餐桌上也是一道非常受欢迎的美味佳肴"
      },
      {
        "s_id": 1,
        "sname": "三个先森的韩国炸鸡(茶南店",
        "location": "104.059019,30.664364",
        "url": "https://fuss10.elemecdn.com/8/23/95c7071dab35af98d4d98330e2addjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
        "description": "三个先森的韩国炸鸡(茶南店) 南朝 梁 沉约 《与约法师书》：“岁时包篚，每见请求，凡厥菜品，必令以荐。” 宋 洪巽 《旸谷漫录》：“菜品第一为葱虀。”"
      }
    ])
</script>

<style lang="scss" scoped>
#container {
    width: 100%;
    height: 100vh;
        // height: 800px;
    // width: 800px;
    height: 90%;
    width: 100%;

    // 因为我们的g-info是后添加的，也就是vue编译的时候它没赶上，data-xxx
    :deep(.g-info) {
        display: flex;
        img {
            width: 80px;
            height: 75px;
            margin-right: 10px;
        }
        p {
            flex: 1;
            display: -webkit-box; /*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
            -webkit-line-clamp: 3; /*设置多少行*/
            -webkit-box-orient: vertical; /*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
            overflow: hidden; /*文本会被修剪，并且剩余的部分不可见*/
            text-overflow: ellipsis; /*显示省略号来代表被修剪的文本*/
        }
    }
}
</style>
